<template>
  <div>
    <d2-container type="card" better-scroll>
      <!-- 可发布课程列表 -->
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="courseClassId" label="课程序号" width="180">
        </el-table-column>
        <el-table-column prop="courseName" label="课程名称" width="180">
        </el-table-column>
        <el-table-column prop="classTime" label="课程安排" width="180">
        </el-table-column>
        <el-table-column prop="credit" label="学分" width="180">
        </el-table-column>
        <el-table-column label="任课教师" width="180">
          <template slot-scope="scope">
            <el-link @click="teainfo(scope.row.teaInfoDTO)" type="primary">{{
              scope.row.teaInfoDTO.name
            }}</el-link>
          </template>
        </el-table-column>
        <!-- <el-table-column label="操作" width="180">
            <template slot-scope="scope">
               <el-button size="mini" @click="push(scope.row.courseClassId)" type="primary">发布<i class="el-icon-upload el-icon--right"></i></el-button>
            </template>
             </el-table-column> -->
      </el-table>
      <template slot="footer">
        <el-button
          @click="push_all"
          style="float:right;margin-left:20px"
          type="primary"
          >发布<i class="el-icon-upload el-icon--right"></i
        ></el-button>
        <el-button
          @click="del_cache"
          type="warning"
          style="float:right;margin-left:20px"
          >删除课程预热</el-button
        >
      </template>
    </d2-container>
    <!-- 弹窗显示教师详细信息 -->
    <el-dialog title="教师详细信息" :visible.sync="dialogVisible" width="30%">
      <el-descriptions
        v-if="dialogVisible"
        class="margin-top"
        :column="3"
        :size="size"
        border
      >
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            照片
          </template>
          <el-image
            style="width: 100px; height: 100px"
            :src="teaInfo.photo"
            fit="fit"
          ></el-image>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            教师姓名
          </template>
          {{ this.teaInfo.name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            资质
          </template>
          {{ this.teaInfo.title }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            手机号
          </template>
          {{ this.teaInfo.phone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            居住地
          </template>
          {{ this.teaInfo.nativeplace }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            学校
          </template>
          <el-tag size="small">{{ this.teaInfo.schoolName }}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            所属院系
          </template>
          {{ this.teaInfo.collegeName }}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <!-- 发布选择时间 -->
    <el-dialog title="发布选择时间" :visible.sync="dialogVisible1" width="30%">
      <el-form :model="form" ref="form" label-width="80px">
        <!-- 选择最大数 -->
        <!-- <el-form-item label="最大数" prop="max">
            <el-input v-model="form.max" placeholder="请输入最大数"></el-input>
        </el-form-item> -->
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker
            v-model="form.startTime"
            type="datetime"
            placeholder="选择开始时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker
            v-model="form.endTime"
            type="datetime"
            placeholder="选择结束时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="push_end" type="primary">确定</el-button>
          <el-button @click="dialogVisible1 = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { get_score, push_score, del_cache } from "@/api/releasecourse/course";
export default {
  data() {
    return {
      tableData: null,
      multipleSelection: [],
      loading: false,
      dialogVisible: false,
      teaInfo: null,
      dialogVisible1: false,
      form: {
        startTime: "",
        endTime: "",
        // max:'',
        courseClassId: ""
      },
      arr: []
    };
  },
  mounted() {
    this.get_score1();
  },
  methods: {
    //删除缓存
    del_cache() {
      del_cache().then(res => {
        if (res.statusCode == 200) {
          this.$message({
            message: "删除成功",
            type: "success"
          });
          this.get_score1();
        } else {
          this.$message({
            message: res.message,
            type: "error"
          });
        }
      });
    },
    // 获取可发布课程列表
    get_score1() {
      console.log("获取课程");
      this.loading = true;
      get_score({
        status: 1
      }).then(response => {
        console.log(response);
        this.loading = false;

        //去掉null
        this.tableData = response.data;
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
    teainfo(val) {
      this.dialogVisible = true;
      this.teaInfo = val;
    },
    push(val) {
      this.multipleSelection = [];
      this.dialogVisible1 = true;
      this.form.courseClassId = val;
      this.arr = [];

      this.arr.push(this.form);
    },
    //批量发布
    push_all() {
      //判断是否选择课程
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: "请选择课程",
          type: "error"
        });
        return;
      } else {
        this.dialogVisible1 = true;

        this.arr = [];
        this.form.startTime = this.get_time();
        this.form.endTime = "2022-07-25 12:12:12";

        console.log(this.arr);
      }
    },
    //获取当前时间加20秒
    get_time() {
      var date = new Date();
      //时间加20秒
      date.setTime(date.getTime() + 18 * 1000);

      var second = date.getSeconds();
      var time =
        date.getFullYear() +
        "-0" +
        (date.getMonth() + 1) +
        "-" +
        date.getDate() +
        " " +
        date.getHours() +
        ":" +
        date.getMinutes() +
        ":" +
        second;
      return time;
    },

    push_end() {
      this.dialogVisible1 = false;
      this.form.startTime = this.form.startTime
        .replace(/T/g, " ")
        .replace(/\.[\d]{3}Z/, "");
      //开始时间加30s
      // this.form.startTime = new Date(this.form.startTime).getTime() + 30 * 1000;
      this.form.endTime = this.form.endTime
        .replace(/T/g, " ")
        .replace(/\.[\d]{3}Z/, "");
      //结束时间加一天

      if (this.multipleSelection.length > 0) {
        for (var i = 0; i < this.multipleSelection.length; i++) {
          let form1 = {
            startTime: this.form.startTime
              .replace(/T/g, " ")
              .replace(/\.[\d]{3}Z/, ""),
            endTime: this.form.endTime
              .replace(/T/g, " ")
              .replace(/\.[\d]{3}Z/, ""),
            max: null,
            courseClassId: null
          };
          form1.courseClassId = this.multipleSelection[i].courseClassId;
          form1.max = this.multipleSelection[i].max;
          this.arr.push(form1);
          console.log(this.arr);
        }
      }

      console.log(this.arr);

      push_score(this.arr).then(response => {
        //消息
        if (response.statusCode == 200) {
          this.$message({
            message: "发布成功",
            type: "success"
          });
        } else {
          this.$message({
            message: "发布失败",
            type: "error"
          });
        }

        console.log(response);
        // this.get_score1();
      });
    }
  }
};
</script>

<style>
.jj {
}
</style>
